*{
  margin: 0;
  padding: 0;
}

.node{
  margin-top: 10%;
  width: 0;
  background-color: #f5f5f5;
}

.node:hover{
  width: 100%;

  transition: 2s;
}

.code1{
    height: 761px;
    width:  810px;
    margin: 20%;
    border: solid red 5px;
    background-color: #F5F5F5;
}

.code2{
  border: none;
}

.code3{
  position: relative;
  left: -25px;
}

.box1{
  font-size: 26px;
  font-weight: 550;
  padding:5px ;
  padding-left:15px ;
}

.box1:hover{
  transition: 2s;
  text-shadow: rgb(228, 61, 167) 1PX 0 1PX ;
}

.box2 button{
  display: flex;
  justify-content: space-around;
  background-color: #F5F5F5;
  border: none;
  font-size: 20px;
  color:rgb(80, 80, 80);
 
}
.box2 button:hover{
    padding: 16px;
    color:rgb(71, 115, 166);
    font-weight: 800;
    background-color: rgb(231, 242, 251);
    transition: 1s;
}
.box2{
  height: 611px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.box3{
  width: 640px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  position: relative;
  top:-630px;
  left: 160px;
}

.box3 img{
  width:300px ;
}

img:hover{
  box-shadow: 10px 50px 50px 0px aquamarine;
}
 

.box4{
  width: 620px;
  height: 42px;
  background:linear-gradient(90deg,#fc7e7e,#f91313,#fc7e7e) ;
  position: relative;
  top: -600px;
  left: 165px;
  /* border: solid blue 5px; */
  border-top-right-radius: 5px ;
  border-top-left-radius: 5px ;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
}

.box4:hover{
  text-shadow: #FC0 1Px 0 10px;
}

.box4 span{
  padding-left:450px ;
  font-weight: 500;
  font-size: 12px;
}
.box4 p{
  font-weight: 700;
}

.box5{

  padding-left: 50px;
  position: relative;
  top: -600px;
  left: 165px;
  width: 567px;
  height: 462px;
  border: none;
  border-left:solid #888 2px ;
  border-right:solid #888 2px ;

}

.box5 p{
     display: block;
     float: left;

}

.box5 button{
  /* display: flex; */
  flex-direction: row;
  justify-content: space-between;
  width: 500px;
  height: 20px;
  background: none;
  border: none;
  border-bottom:solid #888 2px ;
  font-size: 16px;
  margin: 20px;


}

.box5 button:hover{
  font-weight: 700;
  font-size: 24px;
  color: #ffffff;
  box-shadow:8px 8px 8px aquamarine ;
  text-align: center;
  padding: 20px;
  width: 100%;
  border:solid #6eafc9 2px;
  transition: 2s;
  text-shadow: rgb(253, 78, 177) 1px 0px 10px;


}

.box5 span{

  color:#888;
  font-size: 12px;
  padding-left:150px ;
  float: right;
}



.demo1{

  width: 50px;
  position: relative;
  top: 5px;
  left: 35px;
  border-bottom: solid #dfdddd 2PX;
}

.demo2{

  width: 20px;
  height: 20px;
  color: white;
  background-color: #f91313;
  font-weight: 700;
  font-size: 16px;
  margin-left: 5px;
  position: relative;
  top: 20px;
  left: 150px;
  border-radius:2px ;
  text-align: center;
}
.demo3{
  width: 400px;
  height: 30px;
  border: none;
}
.dev1{
  height: 661px;
  width: 125px;
}